<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap-movie.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/animate.css">
    <!--播放页面-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resource/static/jwplayer/skins/stormtrooper.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/resource/static/ueditor/ueditor.config.js"></script>
    <!--播放页面-->
    <style>
        .navbar-brand>img {
            display: inline;
        }
        .media{
            padding:3px;
            border:1px solid #ccc
        }
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }


    </style>
</head>

<body>
<!--导航-->
<%@include file="includetop.jsp"%>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:76px">
    <div class="row">
        <div class="col-md-8">
            <div id="moviecontainer"></div>
        </div>
        <div class="col-md-4" style="height:500px;">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-facetime-video"></span>&nbsp;电影介绍</h3>
                </div>
                <div class="panel-body" style="height:459px;">
                    <table class="table">
                        <tr>
                            <td style="width:30%;color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-film" ></span>&nbsp;片名
                            </td>
                            <td id="glyphiconfilm">${playMovie[0].videoName}</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-tag"></span>&nbsp;标签
                            </td>
                            <td>${playMovieTag[0].tagName}</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-time"></span>&nbsp;片长
                            </td>
                            <td>${length}</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-map-marker"></span>&nbsp;地区
                            </td>
                            <td>${playMovie[0].videoArea}</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-star"></span>&nbsp;星级
                            </td>
                            <td>
                                <div>
                                    <c:choose>
                                        <c:when test="${playMovie[0].videoStart==1}">
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                        </c:when>
                                        <c:when test="${playMovie[0].videoStart==2}">
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                        </c:when>
                                        <c:when test="${playMovie[0].videoStart==3}">
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                        </c:when>
                                        <c:when test="${playMovie[0].videoStart==4}">
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                                        </c:when>
                                        <c:otherwise>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-calendar"></span>&nbsp;上映时间
                            </td>
                            <td>${timeByDate}</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-play"></span>&nbsp;播放数量
                            </td>
                            <td>${playMovie[0].videoNumber}</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-comment"></span>&nbsp;评论数量
                            </td>
                            <td id="glyphiconComment">${homePageInfo.total}</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-picture"></span>&nbsp;影片介绍
                            </td>
                            <td>
                                ${playMovie[0].videoRecommend}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-12" style="margin-top:6px;">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span>&nbsp;电影评论</h3>
                </div>

                <c:choose>
                <c:when test="${sessionScope.userName ==null}">
                <div class="panel-body">
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert">
                            <span aria-hidden="true">×</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <strong>请先<a href="/person/tologin" target="_blank" class="text-info">登录</a>，才可参与评论！</strong>
                    </div>
                    </c:when>
                    </c:choose>


                    <ol class="breadcrumb" style="margin-top:6px;" >
                        <li id="commentNum">全部评论(${homePageInfo.total})</li>
                    </ol>
                    <form role="form" style="margin-bottom:6px;">
                        <div class="form-group">
                            <div>
                                <label for="input_content">内容</label>
                                <textarea id="input_content" style="width: 1136px; height: 147px;" onkeyup="wordStatic(this);"
                                          placeholder="评论内容请输入1000字以内"
                                          maxlength="1000"
                                ></textarea>
                                <p><span id="content_num">0</span>/<span>1000</span></p>
                            </div>
                            <div class="col-xs-12" id="error_content"></div>
                        </div>
                        <a class="btn btn-success" id="btn-sub" onclick="submitComment('${sessionScope.userId}')"><span class="glyphicon glyphicon-edit"></span>&nbsp;提交评论</a>
                        &nbsp;
                        <a class="btn btn-danger" id="btn-col" onclick="collection()"><span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影</a>
                    </form>
                    <ul class="commentList" id="commentList">
                        <c:forEach items="${homePageInfo.list}" var="pageInfo">
                            <li class="item cl">
                                <a href="user.jsp">
                                    <i class="avatar size-L radius">
                                        <img alt="50x50"
                                        <c:choose>
                                        <c:when test="${pageInfo.personImage!=null and pageInfo.personImage!=''}">
                                             src="${pageContext.request.contextPath}/resource/static/base/person/${pageInfo.personImage}"
                                        </c:when>
                                        <c:otherwise>
                                             src="${pageContext.request.contextPath}/resource/static/admin/dist/img/user3-128x128.jpg"
                                        </c:otherwise>
                                        </c:choose>
                                             class="img-circle"
                                             style="border:1px solid #abcdef; width: 50px; height: 50px;">
                                    </i>
                                </a>
                                <div class="comment-main">
                                    <header class="comment-header">
                                        <div class="comment-meta">
                                            <a class="comment-author" href="user.jsp">${pageInfo.personName}</a>
                                            评论于
                                            <time title="2016-12-07 09:12:51"
                                                  datetime="2016-12-07 09:12:51">${pageInfo.addtime}</time>
                                        </div>
                                    </header>
                                    <div class="comment-body">
                                        <p>${pageInfo.commentContent}</p>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                    <div class="col-md-12 text-center" id="textcenter">
                        <nav aria-label="Page navigation" id="Pagenavigation">
                            <ul class="pagination" id="pagination">

                                <li><a href="#" onclick="doGetComment(1)">首页</a></li>
                                <li>
                                    <c:choose>
                                        <c:when test="${homePageInfo.isFirstPage}">
                                            <a href="javascript:void(0)" onclick="doGetComment(1)"
                                               aria-label="上一页"><span
                                                    aria-hidden="true">上一页</span></a>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="javascript:void(0)"
                                               onclick="doGetComment(${homePageInfo.pageNum - 1})"
                                               aria-label="上一页"><span
                                                    aria-hidden="true">上一页</span></a>
                                        </c:otherwise>
                                    </c:choose>
                                </li>
                                <c:choose>
                                <c:when test="${homePageInfo.total!=0}">
                                <li>
                                    <a href="javascript:void(0)" id="pageNum"
                                      >${homePageInfo.pageNum}/${homePageInfo.pages}
                                    </a></li>
                                <li>
                                    </c:when>
                                    <c:otherwise>
                                <li>
                                    <a href="javascript:void(0)" id="pageNum">${homePageInfo.pages}/${homePageInfo.pages}
                                    </a></li>
                                <li>
                                    </c:otherwise>
                                    </c:choose>
                                    <c:choose>
                                        <%--如果当前页和最大页数相等，说明是最后一页，下一页就不能加1；否则就加1--%>
                                    <c:when test="${homePageInfo.pageNum >= homePageInfo.pages}">
                                <li data-name="nextPage">
                                    <a href="javascript:void(0)" onclick="doGetComment(${homePageInfo.pages})"
                                       aria-label="下一页"><span
                                            aria-hidden="true">下一页</span></a>
                                </li>
                                </c:when>
                                <c:otherwise>
                                    <li data-name="nextPage">
                                        <a href="javascript:void(0)" onclick="doGetComment(${homePageInfo.pageNum + 1})"
                                           aria-label="下一页"><span
                                                aria-hidden="true">下一页</span></a>
                                    </li>
                                </c:otherwise>
                                </c:choose>
                                </li>
                                <li><a href="javascript:void(0)" onclick="doGetComment(${homePageInfo.pages})"
                                       aria-label="尾页">尾页</a></li>

                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2017&nbsp;flaskmovie.imooc.com&nbsp;京ICP备 13046642号-2
                </p>
            </div>
        </div>
    </div>
</footer>
<!--底部-->
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.singlePageNav.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/lazyload/jquery.lazyload.min.js"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<!--播放页面-->
<script src="${pageContext.request.contextPath}/resource/static/jwplayer/jwplayer.js"></script>

<script type="text/javascript">
    jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";
</script>
<script type="text/javascript">
    jwplayer("moviecontainer").setup({
        flashplayer: "${pageContext.request.contextPath}/resource/static/jwplayer/jwplayer.flash.swf",
        playlist: [{
            file: "${pageContext.request.contextPath}/resource/static/video/${playMovie[0].videoAddress}",
            title: "${playMovie[0].videoName}"
        }],
        modes: [{
            type: "html5"
        }, {
            type: "flash",
            src: "${pageContext.request.contextPath}/resource/static/jwplayer/jwplayer.flash.swf"
        }, {
            type: "download"
        }],
        skin: {
            name: "vapor"
        },
        "playlist.position": "left",
        "playlist.size": 400,
        height: 500,
        width: 774,
    });
</script>
<!--播放页面-->
<script>
    $(function () {
        new WOW().init();
    })
</script>
<script>
    $(window).load(function () {
        var videoNumber = '${playMovie[0].videoId}'
        var personId = '${sessionScope.userId}'
        var data = {
            "videoNumber": videoNumber,
            "personId": personId
        }
        $.ajax({
            url: "/admin/insertVideoS",
            data: data,
            type: "get",
            dataType: "json",
            success: function (res) {
                //通过判断是否收藏来改变不同的触发事件
                //如果收藏了
                if (res.data) {
                    $("#btn-col").removeAttr("onclick").attr("onclick", "cancel()");
                    $("#btn-col").text("取消收藏");
                }

            },
            error: function (e1, e2, e3) {
                console.log(e1)
                console.log(e2);
                console.log(e3)
            }
        })
    });
    //取消收藏
    function cancel() {
        <%--var videoNumber = ${playMovie[0].videoId};--%>
        <%--var personId = 1;--%>
        <%--var collectionTime = new Date().Format("yyyy-MM-dd HH:mm:ss");--%>
        <%--var data = {--%>
        <%--    "videoNumber": videoNumber,--%>
        <%--    " personId": personId,--%>
        <%--    "collectionTime": collectionTime--%>
        <%--}--%>

        $.ajax({
            url: "/admin/cancal",
            data: {"personId":'${sessionScope.userId}',
            "videoNumber":'${playMovie[0].videoId}'},
            type: "post",
            dataType: "json",
            success: function (res) {
                if(res.code==200){
                    alert("取消收藏成功")
                    $("#btn-col").removeAttr("onclick").attr("onclick", "collection()");
                    $("#btn-col").text("收藏电影");
                }
window.location.reload();
            },
            error: function (e1, e2, e3) {
                console.log(e1)
                console.log(e2);
                console.log(e3)
            }
        })
    }
    //收藏电影
    function collection() {
        var userName='${sessionScope.userName}'
        if(userName==null||userName==''){
            alert("请登录再收藏")
        }else{
        var videoNumber = '${playMovie[0].videoId}'
        var personId = '${sessionScope.userId}'
        var collectionTime = new Date().Format("yyyy-MM-dd HH:mm:ss");
        var data = {
            "videoNumber": videoNumber,
            "personId": personId,
            "collectionTime": collectionTime
        }
         console.log(data);
        $.ajax({
            url: "/admin/collection",
            data: data,
            type: "post",
            dataType: "json",
            success: function (res) {
                if(res.code==200){
                    alert("收藏成功")
                    $("#btn-col").removeAttr("onclick").attr("onclick", "cancel()");
                    $("#btn-col").text("取消收藏");
                }else {
                    alert(res.msg)
                }

            },
            error: function (e1, e2, e3) {
                console.log(e1)
                console.log(e2);
                console.log(e3)
            }
        })
        }
    }
</script>
<script>
    //留言字数限制
    function wordStatic(input) {
        // 获取要显示已经输入字数文本框对象
        var content = document.getElementById('content_num');
        if (content && input) {
            // 获取输入框输入内容长度并更新到界面
            var value = input.value;
            // 将换行符不计算为单词数
            value = value.replace(/\n|\r/gi, "");
            // 更新计数
            content.innerText = value.length;
        }
    }
</script>
//评论
<script>
    function submitComment(personId) {
        var res=document.getElementById('input_content').value;
        if (personId == ''||personId==null ) {
            alert("请进行登录再评论!!");
        } else if (res.length==0) {
            alert("输入不能为空");
        }else {
            //获取当前登录的用户名，评论内容，评论的电影，添加时间
            var movieId='${playMovie[0].videoId}'
            var commentNum=${homePageInfo.total+1};
            var commentContent = $("#input_content").val();
            var movieName = $("#glyphiconfilm").text();
            var addTime = new Date().Format("yyyy-MM-dd HH:mm:ss");
            var data = {
                "movieId":movieId,
                "commentNum":commentNum,
                "personId": personId,
                "commentContent": commentContent,
                "movieName": movieName,
                "addTime": addTime
            }
            console.log(data)
            $.ajax({
                url: "/comment/insertComment",
                data: data,
                type: "get",
                dataType: "json",
                success: function (res) {
                    if (res.code == 200) {
                        alert(res.msg)
                        //刷新当前页
                        $("#glyphiconComment").text('${homePageInfo.total+1}')
                        window.location.reload();
                        //评论提交后数据回显，调用分页实现到第一页的界面
                        <%--doGetComment(1)--%>
                        <%--//实时更新评论数量--%>
                        <%--$("#commentNum").text('全部评论(${homePageInfo.total+1})')--%>
                        <%--window.location = "/film/player/${playMovie[0].videoId}/${playMovie[0].videoName}";--%>

                    } else {
                        alert(res.msg)
                    }
                },
                error: function (e1,e2) {
                    console.log(e1)
                    console.log(e2)
                    alert("小二正忙，一会再试");
                }
            })
        }
    }

    //格式化日期
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

</script>
<script>
    //留言分页
    function doGetComment(page) {
        if (page == null) {
            page = 1;
        }
        //需要传递给后端参数，当前第几页page，每页多少个size
        var data = {
            "pageNum": page,
            "pageSize": 5
        }
        $.ajax({
            url: "/comment/homeCommentListPage/${playMovie[0].videoName}",
            data: data,
            type: "get",
            dataType: "json",
            success: function (res) {
                console.log(res);
                //获取产品数据
                var commentList = res.data.list;
                $("#commentList").empty();
                for (var i = 0; i < commentList.length; i++) {
                    updateCommentList(commentList[i]);

                }
                //分页页码的展示
                setCommentListPage(res.data);

            },
            error: function () {
                alert("小二正忙，一会再试");
            }
        })
    }

    //留言信息展示的方法
    function updateCommentList(comment) {
        var li = '<li class="item cl">' +
            '<a href="user.jsp">' +
            '<i class="avatar size-L radius">' +
            ' <img alt="50x50"';

        var li1 = ' class="img-circle"' +
            'style="border:1px solid #abcdef; width: 50px; height: 50px;">' +
            ' </i>' +
            ' </a>' +
            '  <div class="comment-main">' +
            '<header class="comment-header">' +
            ' <div class="comment-meta">' +
            ' <a class="comment-author" href="user.jsp">' + comment.personName + '</a>' +
            ' 评论于&nbsp;' +
            '<time title="2016-12-07 09:12:51"' +
            'datetime="2016-12-07 09:12:51">' + comment.addtime + '</time>' +
            '</div>' +
            ' </header>' +
            '  <div class="comment-body">' +
            ' <p>' + comment.commentContent + '</p>' +
            ' </div>' +
            ' </div>' +
            '    </li>';
        if (comment.personImage != null&&comment.personImage !=="") {
            li = li+ 'src="${pageContext.request.contextPath}' + '/resource/static/base/person/' + comment.personImage + '"'+li1;
        } else {
            li = li + 'src="${pageContext.request.contextPath}' + '/resource/static/admin/dist/img/user3-128x128.jpg"'+li1;
        }
        $("#commentList").append(li);

    }

    //留言信息页码展示的方法
    function setCommentListPage(pageInfo) {
        var ul = $("#textcenter").children().children("ul")[0];
        console.log(ul)
        $(ul).empty();
        var firstPage = '<li data-name="firstPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + 1 + ')" aria-label="首页"><span' +
            ' aria-hidden="true">首页</span></a>' +
            '</li>';

        var prePageNum = 0;
        if (pageInfo.pageNum <= 1) {
            prePageNum = 1;
        } else {
            prePageNum = pageInfo.pageNum - 1;
        }
        var prevPage = '<li data-name="prevPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + prePageNum + ')" aria-label="上一页"><span' +
            ' aria-hidden="true">上一页</span></a>' +
            '</li>';
        if (pageInfo.total > 0) {
            var pageThis = '<li class="pageThis">' +
                '<a href="javascript:void(0)" id="pageNum" title="' + pageInfo.pageNum + '">' + pageInfo.pageNum + '/' + pageInfo.pages + '</a>' +
                '</li>';
        } else {
            var pageThis = '<li class="pageThis">' +
                '<a href="javascript:void(0)" id="pageNum" title="' + pageInfo.pageNum + '">' + pageInfo.pages + '/' + pageInfo.pages + '</a>' +
                '</li>';
        }
        var nextPageNum = 0;
        if (pageInfo.pageNum >= pageInfo.pages) {
            nextPageNum = pageInfo.pages;
        } else {
            nextPageNum = pageInfo.pageNum + 1;
        }
        var nextPage = '<li data-name="nextPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + nextPageNum + ')" aria-label="下一页"><span' +
            ' aria-hidden="true">下一页</span></a>' +
            '</li>';

        var lastPage = '<li data-name="lastPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + pageInfo.pages + ')" aria-label="尾页"><span' +
            ' aria-hidden="true">尾页</span></a>' +
            '</li>';
        $(ul).append(firstPage)
        $(ul).append(prevPage)
        $(ul).append(pageThis)
        $(ul).append(nextPage)
        $(ul).append(lastPage)

    }
</script>
<script>
</script>
</body>
</html>
